{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>标签页</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>标签页允许通过点击一个导航或列表项目来切换显示的内容。</p></article>







<style>
.example-tabs-with-nav .nav {margin-bottom: 20px;}
</style>


<section><header><h3>结构</h3></header><article><p>标签页一般配合<a href="#component/nav">导航</a>使用，为导航上每个用于切换标签内容的链接添加 <code>[href]</code> 或 <code>[data-target]</code> 属性指向当前标签页内容的 ID，并添加 <code>[data-toggle="tab"]</code> 属性。</p><p>另一种快捷方法是为用于切换标签页的链接使用 <code>[data-tab]</code> 属性，属性值指向所切换的 <code>.tab-pane</code> 元素。这种方法不需要 <code>[data-target]</code> 和 <code>[data-toggle="tab"]</code> 属性。</p><p>标签页内容使用 <code>.tab-pane</code> 作为容器元素，所有供切换显示的 <code>.tab-pane</code> 放置在 <code>.tab-content</code> 容器元素内。</p><p>为确保在页面显示的时候标签页能够指示正确的标签和显示正确的内容，在初始状态需要为当前选中的导航项目 <code>&lt;li&gt;</code> 元素添加 <code>.active</code> 类，并且为当前显示的标签页内容元素 <code>.tab-pane</code> 添加 <code>.active</code> 类。</p><h4>示例</h4><div class="example-tabs-with-nav example">
  <ul class="nav nav-tabs">
    <li class="active"><a data-tab="" href="#tabContent1">标签1</a></li>
    <li><a data-tab="" href="#tabContent2">标签2</a></li>
    <li><a data-tab="" href="#tabContent3">标签3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tabContent1">
      <p>我是标签1。</p>
    </div>
    <div class="tab-pane" id="tabContent2">
      <p>标签2的内容。</p>
    </div>
    <div class="tab-pane" id="tabContent3">
      <p>这是标签3的内容。</p>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav nav-tabs"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">data-tab</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#tabContent1"</span><span class="tag">&gt;</span><span class="pln">标签1</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">data-tab</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#tabContent2"</span><span class="tag">&gt;</span><span class="pln">标签2</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">data-tab</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#tabContent3"</span><span class="tag">&gt;</span><span class="pln">标签3</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-content"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-pane active"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tabContent1"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">我是标签1。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-pane"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tabContent2"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">标签2的内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-pane"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tabContent3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">这是标签3的内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




<section><header><h3>动画效果</h3></header><article><p>为每个 <code>.tab-pane</code> 添加 <code>.fade</code> 类，可以使得标签内容在显示时获得渐变动画效果。在初始状态要显示的标签页内容 <code>.tab-pane</code> 不仅需要添加 <code>.active</code> 类，还需要添加 <code>.in</code> 类。</p><div class="example-tabs-with-nav example">
  <ul class="nav nav-tabs">
    <li class="active"><a href="###" data-target="#tab2Content1" data-toggle="tab">标签1</a></li>
    <li><a href="###" data-target="#tab2Content2" data-toggle="tab">标签2</a></li>
    <li><a href="###" data-target="#tab2Content3" data-toggle="tab">标签3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade active in" id="tab2Content1">
      <p>我是标签1。</p>
    </div>
    <div class="tab-pane fade" id="tab2Content2">
      <p>标签2的内容。</p>
    </div>
    <div class="tab-pane fade" id="tab2Content3">
      <p>这是标签3的内容。</p>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav nav-tabs"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#tab2Content1"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tab"</span><span class="tag">&gt;</span><span class="pln">标签1</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#tab2Content2"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tab"</span><span class="tag">&gt;</span><span class="pln">标签2</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#tab2Content3"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tab"</span><span class="tag">&gt;</span><span class="pln">标签3</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-content"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-pane fade active in"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tab2Content1"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">我是标签1。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-pane fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tab2Content2"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">标签2的内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-pane fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tab2Content3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">这是标签3的内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




<section><header><h3>垂直标签页</h3></header><article><p>使用 <code>.nav-tabs.nav-stacked</code> 获得垂直排列的标签导航，使用 <a href="#basic/grid">栅格</a> 来使得导航和标签页内容水平排列。</p><div class="example-tabs-with-nav example">
  <div class="row">
    <div class="col-xs-3">
      <ul class="nav nav-tabs nav-stacked">
        <li class="active"><a href="###" data-target="#tab3Content1" data-toggle="tab">标签1</a></li>
        <li><a href="###" data-target="#tab3Content2" data-toggle="tab">标签2</a></li>
        <li><a href="###" data-target="#tab3Content3" data-toggle="tab">标签3</a></li>
      </ul>
    </div>
    <div class="col-xs-9">
      <div class="tab-content col-xs-9">
        <div class="tab-pane fade active in" id="tab3Content1">
          <p>我是标签1。</p>
        </div>
        <div class="tab-pane fade" id="tab3Content2">
          <p>标签2的内容。</p>
        </div>
        <div class="tab-pane fade" id="tab3Content3">
          <p>这是标签3的内容。</p>
        </div>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav nav-tabs nav-stacked"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#tab3Content1"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tab"</span><span class="tag">&gt;</span><span class="pln">标签1</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#tab3Content2"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tab"</span><span class="tag">&gt;</span><span class="pln">标签2</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#tab3Content3"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tab"</span><span class="tag">&gt;</span><span class="pln">标签3</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-9"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-content col-xs-9"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-pane fade active in"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tab3Content1"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">我是标签1。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-pane fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tab3Content2"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">标签2的内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tab-pane fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tab3Content3"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">这是标签3的内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




<section><header><h3>方法</h3></header><article><h4>显示标签页内容</h4><ul>
<li><code>$().tab('show')</code></li>
</ul><p>用于手动显示当前元素指示的标签页内容。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myTabLink'</span><span class="pun">).</span><span class="pln">tab</span><span class="pun">(</span><span class="str">'show'</span><span class="pun">);</span></code></pre></article></section>



<section><header><h3>事件</h3></header><article><p>当显示一个新的标签页时，这些事件会被触发：</p><ul>
<li><code>show.zui.tab</code>：当前标签页在显示时触发；</li>
<li><code>shown.zui.tab</code>：当前标签页在显示后（动画执行完毕）触发。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'[data-tab]'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'shown.zui.tab'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'当前被激活的标签页'</span><span class="pun">,</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">target</span><span class="pun">);</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'上一个标签页'</span><span class="pun">,</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">relatedTarget</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span></code></pre><div class="alert alert-primary">
  <h4>需要动态标签页？</h4>
  <p><a href="#view/tabs">标签页管理器</a> 提供远程或自定义标签的打开关闭功能。</p>
</div></article></section></div>
</section>
{/block}